import React, { createContext, useState } from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';

interface ThemeContextProps {
  isDarkTheme: boolean;
  toggleTheme: () => void;
}

export const ThemeContext = createContext<ThemeContextProps>({
  isDarkTheme: false,
  toggleTheme: () => {}
});

const CustomApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  const toggleTheme = (): void => {
    setIsDarkTheme(prevTheme => !prevTheme);
  };

  const theme = {
    isDarkTheme,
    toggleTheme
  };

  return (
    <ThemeContext.Provider value={theme}>
      <StyledThemeProvider theme={theme}>
        <Component {...pageProps} />
      </StyledThemeProvider>
    </ThemeContext.Provider>
  );
};

export default CustomApp;
